<template>
  <d2-container>
    <!-- 修改弹出框 -->
    <el-dialog title="修改考核指标" :visible.sync="dialogFormVisibleRedact">
      <el-form :model="form_update">
        <el-form-item label="指标名称" :label-width="formLabelWidth">
          <el-input v-model="form_update.name" autocomplete="off"></el-input>
        </el-form-item>

        <div class="c">
          请选择指标:<el-select v-model="assessmentTypes" clearable :placeholder="form_update.theassessmentNameString"  >
            <el-option v-for="item in optionsType" :key="item.value"  :label="item.assessmentTypes"  :value="item.assessmentTypes" >
            </el-option>
          </el-select>
        </div>
        <!-- <el-form-item label="考核名称" :label-width="formLabelWidth">
          <el-input
            v-model="form_update.theassessmentNameString"
            autocomplete="off"
          ></el-input>
        </el-form-item> -->

        <el-form-item label="指标值" :label-width="formLabelWidth">
          <el-input
            v-model="form_update.targetedValue"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="权重" :label-width="formLabelWidth">
          <el-input v-model="form_update.weight" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="归属" :label-width="formLabelWidth">
          <el-input
            v-model="form_update.deptString"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <template slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleRedact = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleupdate"
          >修 改</el-button
        >
      </template>
    </el-dialog>

    <!-- 弹出框 -->
    <el-dialog title="新增考核指标" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="指标名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <div class="c">
       请选择指标:<el-select v-model="assessmentTypes"  clearable placeholder="请选择考核种类"  >
            <el-option  v-for="item in optionsType" :key="item.value"  :label="item.assessmentTypes" :value="item.assessmentTypes" >
            </el-option>
            </el-select>
        </div>

        <el-form-item label="指标值" :label-width="formLabelWidth">
          <el-input v-model="form.targetedValue" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="权重" :label-width="formLabelWidth">
          <el-input v-model="form.weight" autocomplete="off"></el-input>
        </el-form-item>
        <div class="c">
       请选择归属:<el-select v-model="Dept"  clearable placeholder="请选择归属"  >
            <el-option  v-for="item in DeptAll" :key="item.value"  :label="item.name" :value="item.name" >
            </el-option>
            </el-select>
        </div>
        <!-- <el-form-item label="归属" :label-width="formLabelWidth">
          <el-input v-model="form.deptString" autocomplete="off"></el-input>
        </el-form-item>
      </el-form> -->
      </el-form>
      <template slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleAdd"
          >确 定</el-button
        >
      </template>
    </el-dialog>
    <div slot="header">
      <!-- 搜索框 -->
      <el-input
        v-model="tablePages.name"
        placeholder="根据指标搜索"
        class="inputBox"
      ></el-input>
      <el-button type="button" class="botton_souch" @click="searchTableData"
        >搜索
      </el-button>

      <!-- 选择器 -->
      <el-select
        v-model="deptString"
        clearable
        placeholder="请选择部门"
        class="selector"
        @change="getStandardList"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.deptString"
          :value="item.deptString"
        >
        </el-option>
      </el-select>
    </div>

    <!-- 按钮 -->
    <div>
      <el-button type="button" @click="open">新增</el-button>
      <el-button type="button">删除 </el-button>
      <el-button type="button">更多操作</el-button>

      <!-- table -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column prop="name" label="所属指标" width="300">
          <div slot-scope="scope">{{ scope.row.name }}</div>
        </el-table-column>
        <el-table-column
          prop="theassessmentNameString"
          label="考核种类"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="creatorString"
          label="操作人"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="deptString"
          label="所属部门"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作">
          <div slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </div>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tablePages.currentPage"
          :page-size="tablePages.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tablePages.total"
        >
        </el-pagination>
      </div></div
  ></d2-container>
</template>

<script>
// export default {
//   name: 'page1'
// }
//
</script>

<style scoped>
.c {
  margin-left: 45px;
  margin-bottom: 20px;
}
.block {
  float: right;
}
.el-form > .el-select {
    margin-left: 10px;
    margin-bottom: 20px;
}
/* .el-input__inner {
  width: 700px;
} */
.inputBox {
  width: 25%;
}

.botton_souch {
  margin-left: 2%;
}

.selector {
  margin-left: 5%;
}
</style>

// 组件js
<script>
import util from "@/libs/util";
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      multipleSelection: [],
      // 控制弹出框展示与隐藏
      dialogFormVisible: false,
      dialogFormVisibleadd: false,
      // 控制编辑弹框展示隐藏
      dialogFormVisibleRedact: false,
      // 绑定弹框中的表单数据
      form: {
        name: "",
        theassessmentName: "",
        theassessmentNameString: "",
        targetedValue: "",
        weight: "",
        dept: "",
        deptString: "",
        updated: "",
        updatedString: "",
        type: [],
        id: 0,
      },
      form_update: {
        name: "",
        theassessmentName: "",
        theassessmentNameString: "",
        targetedValue: "",
        weight: "",
        dept: "",
        deptString: "",
        updated: "",
        updatedString: "",
        type: [],
        id: 0,
      },
      formLabelWidth: "120px",
      // 配置表格信息
      tablePages: {
        // 当前页数
        currentPage: 1,
        // 每页条数
        limit: 10,
        // 列表总数
        total: 0,
        // 搜索框
        name: null,
      },
      //搜索框
      input: "",

      // 选择器
      options: [{}],
      value: "",
      optionsType: [],
      assessmentTypes: "",
      // table
      tableData: [],
      DeptAll: [],
      Dept: '',
      multipleSelection: [],
    };
  },
  created() {
    this.getTableList(this.tablePages);
    this.getAllList();
    this.getAllType();
    this.getAllDept();
  },
  //分页
  methods: {
    //选择框change事件
    getStandardList() {
      this.getTableList(Object.assign(this.tablePages, { dept: this.dept }));
    },
    //查找所有无分页
    getAllList() {
      this.$request({
        url: "Standard/findAll",
        method: "post",
      }).then((res) => {
        this.options = res;
      });
    },
    //查找所有考核种类
    getAllType() {
      this.$request({
        url: "type/findAll",
        method: "post",
      }).then((res) => {
        this.optionsType = res;
      });
    },
    getAllDept(){
     this.$request({
        url: "dept/findAllDept",
        method: "post",
      }).then((res) => {
        this.DeptAll = res;
      });
    },
    // 新增方法
    dialogFormVisibleAdd() {
      const params = {
        name: this.form.name,
        theassessmentNameString: this.assessmentTypes,
        targetedValue: this.form.targetedValue,
        weight: this.form.weight,
        deptString: this.Dept,
        creatorString: util.cookies.get("uuid"),
      };
      console.log(params);
      this.$request({
        url: "Standard/addAssessStandard",
        method: "post",
        data: params,
      }).then((res) => {
        this.getTableList(this.tablePages);
        this.dialogFormVisible = false;
        this.$message.success("新增成功");
      });
    },
    // 查找所有
    getTableList({ currentPage, limit, name, deptString }) {
      this.$request({
        url: "Standard/findAllAssessStandard",
        method: "post",
        data: {
          currentPage,
          limit,
          data: {
            name,
            deptString,
          },
        },
      }).then((res) => {
        // 给表格赋值
        this.tableData = res.list;
        // 给表格总数赋值
        this.tablePages.total = res.total;
      });
    },
    open() {
      this.dialogFormVisible = true;
    },
    /**
     * 打开编辑弹框
     * @date 2021-12-16
     * @param {any} index 下标
     * @param {any} row 当前行对象
     */
    handleEdit(index, row) {
      this.dialogFormVisibleRedact = true;
      this.$request({
        url: "Standard/findById",
        method: "post",
        data: row,
      }).then((res) => {
        this.form_update.name = res[0].name;
        this.form_update.theassessmentNameString =
          res[0].theassessmentNameString;
        this.form_update.id = res[0].id;
        this.form_update.targetedValue = res[0].targetedValue;
        this.form_update.weight = res[0].weight;
        this.form_update.deptString = res[0].deptString;
      });
    },
    // 修改方法
    dialogFormVisibleupdate() {
      const params = {
        name: this.form_update.name,
        theassessmentNameString: this.form_update.theassessmentNameString,
        id: this.form_update.id,
        targetedValue: this.form_update.targetedValue,
        weight: this.form_update.weight,
        deptString: this.form_update.deptString,
        updatedString: util.cookies.get("uuid"),
      };
      this.$request({
        url: "Standard/updateAssessStandard",
        method: "post",
        data: params,
      }).then((res) => {
        this.getTableList(this.tablePages);
        this.dialogFormVisibleRedact = false;
        this.$message.success("修改成功");
      });
    },
    /**
     * 列表删除操作
     * @date 2021-12-16
     * @param {any} index 当前对象下标
     * @param {any} row 当前行对象
     */
    handleDelete(index, row) {
      this.$request({
        url: "Standard/deleteAssessStandard",
        method: "post",
        data: row,
      }).then((res) => {
        this.$message.success((res && res.msg) || "删除成功");
        this.getTableList(this.tablePages);
      });
    },
    /**
     * 页码发生改变时触发的事件
     * @date 2021-12-16
     * @param {any} currentPage 切换后的当前页码
     */
    handleCurrentChange(currentPage) {
      this.tablePages.currentPage = currentPage;
      this.getTableList(this.tablePages);
    },
    /**
     * 页数发生改变时触发的事件
     * @date 2021-12-16
     * @param {any} limit 切换后的每页条数
     */
    handleSizeChange(limit) {
      this.tablePages.limit = limit;
      this.getTableList(this.tablePages);
    },
    searchTableData() {
      console.log(this.tablePages.name);
      this.getTableList(this.tablePages, this.tablePages.name);
      this.tablePages.name = null;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
